<!DOCTYPE html>
<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>举报房源管理</title>
<!--    <script th:src="@{/airent/js/vue.js}" type="text/javascript"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- Bootstrap core CSS -->
    <link th:href="@{/airent/css/bootstrap.min.css}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link th:href="@{/airent/css/dashboard.css}" rel="stylesheet">
    <style type="text/css">
        /* Chart.js */

        @-webkit-keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        @keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }

        .chartjs-render-monitor {
            -webkit-animation: chartjs-render-animation 0.001s;
            animation: chartjs-render-animation 0.001s;
        }
    </style>
</head>

<body>
<!--引入头部文件-->
<div th:replace="~{head/topBar::topBar(activeUri='manage')}"></div>

<div class="container-fluid">
    <div class="row" id="app">
        <!--引入左侧栏-->
        <div th:replace="~{commons/sideBar :: sideBar(activeUri = 'report')}"></div>
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <!--<h2><A shiro:hasRole="admin" th:href="@{/department/showAllDepartment}">添加</A> </h2>-->
            <div class="table-responsive">
                <div class="container">
                    <table class="table">
                        <thead>
                        <tr>
                            <th scope="col">帖子</th>
                            <th scope="col">发布日期</th>
                            <th scope="col">当前状态</th>
                            <th scope="col">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="h in house" aria-disabled="true">

                            <td><a class="nav-link2" v-bind:href="'/houseUser/detail?houseId='+h.houseId">{{h.houseResource}}</a></td>
                            <td v-text="h.rentDate"></td>
                            <td v-if="h.examine == 3">被举报,用户可浏览</td>
                            <td>
                                <div class="btn-group" role="group" aria-label="Basic example">
                                <button type="button" class="btn btn-secondary" @click="pass(h.houseId)">通过审核
                                </button>
                                <button type="button" class="btn btn-secondary" @click="refuse(h.houseId)">未通过审核</button>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <nav aria-label="Page navigation example">
                        <ul class="pagination">
                            <li class="page-item" @click="go(pre)">
                                <a class="page-link" href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li v-for="i in pages" @click="go(i)" :class="i==pageNum?'page-item active':'page-item disabled'">
                                <a class="page-link" href="#" v-text="i"></a>
                            </li>

                            <li class="page-item" @click="go(next)">
                                <a class="page-link" href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </main>
    </div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" th:src="@{/airent/plugins/jquery/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/airent/js/popper.min.js}"></script>
<script type="text/javascript" th:src="@{/airent/js/bootstrap.min.js}"></script>

<!-- Icons -->
<script type="text/javascript" th:src="@{/airent/js/feather.min.js}"></script>
<script>
    feather.replace()
</script>

<!-- Graphs -->
<script type="text/javascript" th:src="@{/airent/js/Chart.min.js}"></script>
<script>
    var vueApp = new Vue({
        el: "#app",
        data: {
            pageNum: 0,
            pageSize: 0,
            pages:0,
            house: {},
            pre:0,
            next:0,
        },
        created() {
            $.get('/manageHouse/list', {
                pageNUm: 1,
                pageSize: 2,
            }).then((data) => {
                vueApp.house = data.list
                vueApp.pages = data.pages
                vueApp.pre = data.prePage
                vueApp.next = data.nextPage
                vueApp.pageNum = data.pageNum
                console.log(data)
            })
        },
        methods: {
            pass : function (id) {
                $.post('/manageHouse/change',{
                    id:id,
                    status:1
                }).then((data)=>{
                    alert(data)
                })
            },
            refuse : function (id) {
                $.get('/manageHouse/change',{
                    id:id,
                    status:2
                }).then((data)=>{
                    alert(data)
                })
            },
            go:function (num) {
                $.get('/manageHouse/list',{pageNum:num},function (data) {
                    vueApp.house = data.list
                    vueApp.pageSize = data.pageSize
                    vueApp.pageNum = data.pageNum
                    vueApp.pages = data.pages
                    vueApp.pre = data.prePage
                    vueApp.next = data.nextPage
                })
            }
        }
    })
</script>
<script>
    function setData(obj) {
        var id = $(obj).attr("id");
        window.localStorage.setItem("id", id);
        alert(id);
    }

</script>

</body>

</html>
